import React, { Component } from 'react';

import Top_tar from '../top_bar/top_bar'
import Main_nav from '../main_nav/main_nav'
import News from '../news/news'
import Menu from '../menu/menu'
import './login.css'

import { loginUser } from '../../utils/api'

export default class Login extends Component {

    goRegisterM = () => {
        this.props.history.push('/register')
    }

    constructor(props) {
        super(props)
        this.state = {
            emInput: '',
            pwdInput: ''
        }
    }

    render() {
        return (
            <div>
                <Top_tar {...this.props} />
                <Main_nav {...this.props} />

                <div className="all_login">
                    <div>
                        <div className="container main content">
                            <div className="sixteen columns clearfix collection_nav">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>客户登入</font>
                                </font>
                            </div>
                        </div>
                    </div>
                    <div className="login-menu">
                        <form >
                            <div className="email">电子邮件</div>
                            <input type="text" className="customer_email" 
                            onChange={this.emM.bind(this)}
                            />
                            <div className="password">密码</div>
                            <a className="customer_password">忘记密码了吗？</a>
                            <input type="password" className="word" 
                            onChange={this.pwdM.bind(this)}
                            />
                            <a>
                                <div type="submit" className="btn action_btn" value="登录"
                                onClick={this.submitM.bind(this)}
                                >登录</div>
                            </a>
                            <div className="user">
                                <a className="register_link">
                                    <font style={{ verticalAlign: 'inherit' }}>
                                        <font onClick={this.goRegisterM.bind(this)}
                                            style={{ verticalAlign: 'inherit' }}>注册→</font>
                                    </font>
                                </a>
                                <div className="new_user">新用户？</div>
                            </div>
                        </form>
                    </div>
                </div>

                <News {...this.props} />
                <Menu {...this.props} />
            </div>
        );
    }

    emM = (a) => {
        // console.log(a.target.value)
        let data = a.target.value
        this.setState(() => {
            return {
                emInput: data,
            }
        }, () => {
            console.log(this.state.emInput)
        })
    }

    pwdM = (a) => {
        // console.log(a.target.value)
        let data = a.target.value
        this.setState(() => {
            return {
                pwdInput: data,
            }
        }, () => {
            console.log(this.state.pwdInput)
        })
    }

    submitM = () => {
        let data = {
            mail: this.state.emInput,
            password: this.state.pwdInput
        }
        loginUser(data).then((res) => {
            console.log(res, '登录')

            if (res.data.msg = 'success') {
                localStorage.setItem('token', res.data.data.token)

                this.props.history.push('/account')
            }
        })
    }
}